<template>
    <view class="swiper" :style="{ 'padding-bottom': height + '%' }">
        <swiper
            class="swiper__main"
            autoplay="true"
            circular="true"
            interval="5000"
            duration="500"
            @change="swiperChange"
        >
            <block v-for="(item, index) in data" :key="index">
                <swiper-item class="swiper__cell" @tap="_click(index)">
                    <image class="swiper__img" :src="item" mode="aspectFill"></image>
                </swiper-item>
            </block>
        </swiper>

        <!-- 轮播指示点样式修改 -->
        <view class="dots">
            <block v-for="(item,index) in data.length" :key="item">
                <view class="dot" :class="index==swiperCurrent ? 'active' : ''"></view>
            </block>
        </view>

    </view>
</template>

<script>
export default {

    data() {
        return {
            swiperCurrent:0,
        }
    },

    props: {
        data: {
            type: Array,
            default: function(e) {
                return [];
            }
        },
        height: { // 高宽百分比
            type: Number,
            default: function(e) {
                return 100;
            }
        }
    },
    methods: {
        _click: function(index) {
            this.$emit('click', index);
        },

        swiperChange:function (e) {
            // console.log('App Launch' + JSON.stringify(e))

            this.swiperCurrent = e.mp.detail.current
        }
    }


};
</script>

<style lang="scss">
/* swiper宽高等比 */
.swiper{
    position: relative;
    width: 100%;
    padding-bottom: 66.67%;
}
.swiper__main{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
}
.swiper__cell,.swiper__img{
    width: 100%;
    height: 100%;
}

.dots {
    position: absolute;
    bottom: 48px;
    left: 23px;
    transform: translate(-50% 0);
    z-index: 4;
    display: flex;
    justify-content: center;

.dot {
    border-radius: 2.5px;
    width: 5px;
    height: 5px;
    transition: all .6s;
    background: rgba(255, 255, 255, .65);
    margin-right: 5px;
}

.active {
    border-radius: 2.5px;
    width: 27px;
    height: 5px;
    background: rgba(255, 255, 255, 1);
}
}




</style>
